<template>
	<view class="news">
		<!-- 顶部导航栏 -->
		<view>
			<u-navbar :placeholder="true" leftIcon="" title="校园头条"></u-navbar>
		</view>
		<!-- 顶部tab标签 -->
		<view>
			<u-tabs :list="tabDatas" @click="tabsClick"></u-tabs>
		</view>
		<!-- 图片轮播 -->
		<view>
			 <u-swiper
			            :list="imgList"
			            keyName="image"
			            showTitle
			            :autoplay="false"
			            circular
			    ></u-swiper>
		</view>
		
		<!-- 信息列表 -->
		<view v-if="nowTabSelect==0">
			<view class="msOne">
				<u-row justify="space-between">
					<u-col span="7">
						<view style="margin-bottom: 50upx;">
							<span style="float: left;background-color: #F2B956;color:#FFF;display: inline-block;width: 80upx;text-align: center;">置顶</span>
							<span style="float: left;display: inline-block;font-weight: bolder;">你好123</span>
						</view>
						<view>
							<span style="float: left;color:gray;font-size: 13upx;">2022.10.10 11:18</span>
							<span style="float: right;color:gray;font-size: 13upx;">18W阅读</span>
						</view>
					</u-col>
					<u-col span="4">
						<u--image radius="10" :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="150upx"></u--image>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<view v-if="nowTabSelect==1">
			<view class="msOne">
				<u-row justify="space-between">
					<u-col span="7">
						<view style="margin-bottom: 50upx;">
							<span style="float: left;background-color: #F2B956;color:#FFF;display: inline-block;width: 80upx;text-align: center;">置顶</span>
							<span style="float: left;display: inline-block;font-weight: bolder;">dasdasdasdasd</span>
						</view>
						<view>
							<span style="float: left;color:gray;font-size: 13upx;">2022.10.10 11:18</span>
							<span style="float: right;color:gray;font-size: 13upx;">18W阅读</span>
						</view>
					</u-col>
					<u-col span="4">
						<u--image radius="10" :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="150upx"></u--image>
					</u-col>
				</u-row>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"news",
		data() {
			return {
				nowTabSelect:0,
				tabDatas:[
					{name:"最热"},
					{name:"最新"},
					{name:"官方"},
					{name:"校内趣事"}
				],
				imgList: [{
				                    image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				                    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				                },{
				                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				                    title: '身无彩凤双飞翼，心有灵犀一点通'
				                },{
				                    image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				                }],
			}
		},
		methods: {
			// 当点击tab标签时的回调
			tabsClick(data){
				this.nowTabSelect = data.index;
			}
		}
	}
</script>

<style scoped>
	.msOne{
		box-sizing: border-box;
		padding: 25upx;
	}
</style>